<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.j-scene-tags>li.active{
			color: red;
		}
		.j-scene-list>li:not(.active) {
			display: none;
		} 
	</style>
</head>
<body>
	<ul class="j-scene-list">
		<li class="media col-md-12">d1</li>
		<li class="media col-md-12">d2</li>
		<li class="media col-md-12">d3</li>
		<li class="media col-md-12">d4</li>
  </ul>
	<ul class="clearfix j-scene-tags">
		<li><a href="javascript:;"><h5>1</h5></a></li>
		<li><a href="javascript:;"><h5>2</h5></a></li>
		<li><a href="javascript:;"><h5>3</h5></a></li>
		<li><a href="javascript:;"><h5>4</h5></a></li>
	</ul>
</body>
<script src="jquery.js"></script>
<script>
	$(function () {
		var $listlis = $('.j-scene-list > li');
		var $taglis = $('.j-scene-tags > li');


		$taglis.click(function(e) {
			$taglis.removeClass('active');
			$listlis.removeClass('active');

			$(e.currentTarget).addClass('active');
			$listlis.eq($(e.currentTarget).index()).addClass('active');
		});
		
		$taglis.eq(0).trigger('click');
  });
</script>
</html>